import React, { Component } from 'react'
import { Card, Modal, Alert, Input  } from 'antd';
import { getData } from '@/utils/localData.js'
import styles from './index.less'
import { connect } from 'dva'

@connect(({ keyt, loading }) => ({ 
    modalIsShow: keyt.modalIsShow,
    publicKey: keyt.publicKey,
    isSet: keyt.isSet,
}))
export default class KeytView extends Component {

    state = {
        privateKey : false,
    }

    handleOk = () =>{
        let privateKey = this.state.privateKey
        this.state.privateKey = null;
        const { dispatch } = this.props
        dispatch({
            type: 'keyt/fetchSetKeyt',
            payload: {
                secret: privateKey,
            }
        })
    }

    handleCancel = () =>{
        const { dispatch } = this.props
        dispatch({
            type: 'keyt/setKeyt',
            payload: {
                modalIsShow: false,
                publicKey: false,
            }
        })
    }

    render() {
        const {isSet, modalIsShow, publicKey, dispatch} = this.props

        return (
            <div className={styles.content}>
                <Card
                    title="接口密钥"
                    extra={<a href="#" onClick = {()=>{
                        dispatch({
                            type: 'keyt/setKeyt',
                            payload: {
                                modalIsShow: true,
                                publicKey: false,
                            }
                        })
                    }}>{isSet? '修改' : '设置' }</a>}
                    style={{ width: '80%' }}
                >   
                    <p>APP_ID: {getData("userId")}</p>
                    <p>{isSet? '已设置密钥，如忘记密钥请重新修改' : '未设置密钥' }</p>
                    {
                        publicKey ?
                        <div>
                            <Alert message={publicKey} type="success" />
                            <p style = {{color:'#801919'}}>请保存此密钥,用于发送短信接口调用</p>
                        </div>
                        :null
                    }
                </Card>
                <Card title="发送短信API接口" style={{ width: '80%', marginTop: '30px' }}>
                    <p>URL：/sms/api</p>
                    <p>Content-Type：application/json</p>
                    <p>方法：POST</p>
                    <p>参数：{'{'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'appId：平台用户appId'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'secret：平台用户设置的密钥'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'telNumList：[ ] 发往短信的电话号字符串集合'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'exCode: 拓展码'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'context：短信内容'}</p>
                    <p>{'}'}</p>
                    <p>返回值：{'{'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'code：逻辑状态码'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'msg：逻辑状态消息'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'subCode：业务状态码'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'subMsg：业务状态消息'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'timestamp：业务时间戳'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'success：业务是否成功'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'fail：业务是否失败'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'{'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{'id：提交成功后，用于查询短信状态的唯一key'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'}'}</p>
                    <p>{'}'}</p>
                    <p style = {{color : 'red'}}>{'PS:  success 为 true 即业务调用成功'}</p>
                </Card>
                <Card title="查询短信API接口" style={{ width: '80%', marginTop: '30px' }}>
                    <p>URL：/sms/apiSelById</p>
                    <p>Content-Type：application/json</p>
                    <p>方法：POST</p>
                    <p>参数：{'{'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'appId：平台用户appId'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'secret：平台用户设置的密钥'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'smsId：提交成功后，用于查询短信状态的唯一key'}</p>
                    <p>{'}'}</p>
                    <p>返回值：{'{'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'code：逻辑状态码'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'msg：逻辑状态消息'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'subCode：业务状态码'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'subMsg：业务状态消息'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'timestamp：业务时间戳'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'success：业务是否成功'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'fail：业务是否失败'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{'{['}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{'telNum：目标号码'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{'status： 0、未发送 1、发送中 2、发送成功 3、发送失败'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{'replyMsg：目标号码的回复信息内容'}</p>
                    <p>&emsp;&emsp;&emsp;&emsp;{']}'}</p>
                    <p>{'}'}</p>
                    <p style = {{color : 'red'}}>{'PS:  success 为 true 即业务调用成功'}</p>
                </Card>
                <Modal
                    title={"设置接口私钥"}
                    visible={modalIsShow}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                    >
                    <p>请设置32到64长度的字符串，PS:包含大小写及特殊字符可以保证其安全性</p>
                    <Input.TextArea rows={4} 
                        value = {this.state.privateKey?this.state.privateKey: ''}
                        onChange = {(e)=>{
                        console.log(e.target.value)
                        this.setState({
                            privateKey: e.target.value
                        })
                    }}/>
                </Modal>
            </div>
        )
    }

    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'keyt/fetchSelKeyt',
        })
    }

    componentWillUnmount(){
        const { dispatch } = this.props
        dispatch({
            type: 'keyt/setPublicKey',
            payload: false
        })
    }
}
